<template>
    <div class="cat">

        <!-- 左侧菜单 -->
        <cat-nav :navList="navList"></cat-nav>
        <!-- 分类页主体 -->
        <cat-main :catBanner="catBanner" :catName="catName" :catProducts="catProducts"></cat-main>
              
    </div>
</template>

<script>

import API from '@/api/api';
import CatNav from './components/CatNav'
import CatMain from './components/CatMain'

export default {
    name: 'Category',
    components: {
        CatNav,
        CatMain
    },
    data() {
        return {
            navList: [],        // 左侧导航
            catBanner: '',      // 分类banner
            catName: '',        // 分类名
            catProducts: []     // 分类下对应的产品
        }
    },
    watch: {
        $route(to) {           
            const catId = this.$route.params.id || 55;
            // console.log(catId);
            this.getCatList(catId);          
        }
    },
    created() {
        // 获取左侧菜单
        this.getNav();
        const catId = this.$route.params.id || 55;
        this.getCatList(catId);
    },
    mounted() {

       
    },
    methods: {
        // 获取左侧分类导航
        getNav() {
            API.getCatNav()
                .then((res) => {
                    // console.log(res);
                    let navList = res.data.data;
                    this.navList = navList;
                    
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        // 获取对应分类列表
        getCatList(catId) {
            API.getCatInfos(catId)
                .then((res) => {
                    // console.log(res);
                    let catInfos = res.data.data;
                    this.catProducts = catInfos.products;   // 分类下对应的产品
                    this.catName = catInfos.name;           // 分类名    
                    this.catBanner = catInfos.picUrl;       // 分类banner      
                })
                .catch((error) => {
                    console.log(error)
                })
        }
    }
   
}
	
</script>

<style lang="less" scoped>
.cat{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    bottom: 1.1rem;
    width: 100%;
}
	
</style>